<template>
  <!-- 注册 -->
  <layout :title="title" background="#fff">
    <view
      class="screen"
      style="height: 100vh"
      :style="'padding-top:' + vuex_phoneLayout.screenPaddingTop + 'px'"
    >
      <view class="login_title"> 填写手机号 </view>
      <view class="login_content">
        <view class="reg_call">
          <image
            src="../../../static/aidex/login/phone.png"
            style="width: 44rpx; height: 44rpx; margin-right: 15rpx"
            mode="heightFix"
          ></image>
          <input
            class="u-input"
            type="tel"
            v-model="phoneNo"
            pattern="[0-9]*"
            maxlength="11"
            placeholder="请输入手机号码"
          />
        </view>
      </view>
      <view class="default-button getCode" @click="getCode()"
        ><text>{{
          this.optionType === "bind" ? "下一步" : "获取验证码"
        }}</text></view
      >

      <!-- <view class="login-bottom-box" style="bottom: 200rpx">
        <u-divider> 更多登录方式 </u-divider>
        <view class="oauth2">
          <u-icon
            class="u-icon"
            size="100"
            color="#36c956"
            name="weixin-circle-fill"
            @click="wxLogin"
          ></u-icon>
        </view>
      </view> -->
      <!-- 	<view class="bottom-box">
				<view class="copyright">
					注册即代表您已阅读并同意<u-link href="#">用户协议</u-link> 与 <u-link href="#">隐私政策</u-link>
				</view>
			</view> -->

      <view
        class="screen-bottomFill"
        style="opacity: 1"
        :style="'height:' + vuex_phoneLayout.ipxbottom + 'px;'"
      >
        <!-- 用来填充导航 和 底部的多余 -->
      </view>
    </view>
  </layout>
</template>
<script>
export default {
  data() {
    return {
      title: "注册",
      phoneNo: "",
      type: "reg",
      optionType: "",
      openId: "",
    };
  },
  onLoad(option) {
    this.optionType = option.type;
    this.openId = option.openId;
    if (option.type === this.type) {
      this.title = "注册";
    } else if (option.type === "bind") {
      this.title = "绑定手机号";
    } else if (option.type === "replace") {
      this.title = "换绑手机号";
    } else {
      this.title = "忘记密码";
    }
  },
  methods: {
    getCode() {
      if (
        /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/.test(
          this.phoneNo
        ) === false
      ) {
        uni.showToast({
          title: "手机号格式错误",
          icon: "none",
        });
        return;
      }
      uni.showLoading({
        title: "正在获取验证码",
        mask: true,
      });
      if (this.optionType === this.type || this.optionType === "bind") {
        this.toReg();
      } else if (this.optionType === "replace") {
        this.toBind();
      } else {
        this.toForget();
      }
    },
    toBind() {
      this.$u.api
        .sendReplacePhoneCode({
          tel: this.phoneNo,
        })
        .then((res) => {
          uni.navigateTo({
            url: `/pages/sys/login/registerCode?phoneNo=${this.phoneNo}&type=replace&hasSend=1`,
          });
        });
    },
    toReg() {
      this.$u.api
        .getRegisterCode({
          phoneNo: this.phoneNo,
        })
        .then((res) => {
          if (res.code == "200" || res.code == "10707") {
            setTimeout(() => {
              uni.navigateTo({
                url: `/pages/sys/login/registerCode?phoneNo=${this.phoneNo}&type=reg&openId=${this.openId}&hasSend=1`,
              });
            }, 500);
          } else {
            this.$u.toast(res.message);
          }
        });
    },
    toForget() {
      uni.navigateTo({
        url: "/pages/sys/login/forget?phoneNo=" + this.phoneNo,
      });
      return;
      this.$u.api
        .getForgetCode({
          phoneNo: this.phoneNo,
        })
        .then((res) => {
          if (res.code == "200" || res.code == "10707") {
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/sys/login/forget?phoneNo=" + this.phoneNo,
              });
            }, 500);
          } else {
            this.$u.toast(res.message);
          }
        });
    },
  },
};
</script>
<style lang="scss">
@import "index.scss";

.reg_call {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 33rpx;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #dedede;
}
.getCode {
  margin-top: 60rpx;
}

.agreement {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 90rpx;
  color: #666;
}
.uni-input-placeholder {
  font-size: 32rpx;
}

.uni-input-input {
  font-size: 32rpx;
}
.bottom-box {
  position: fixed;
  bottom: 40rpx;
  text-align: center;
  width: 100%;
}
.copyright {
  text-align: center;
  color: #939393;
  width: 100%;
  font-size: 24rpx;
  .u-link {
    margin: 0 10rpx;
    font-size: 24rpx !important;
  }
}
</style>
